<template>
	<gui-page>
		<template v-slot:gBody>
			<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
				<view @tap="open('guimodal1')">
					<cardBody :icon="'&#xe6fe;'" :title="'用户名'" :value="`${item.username}`" :arrowShow="'1'"
						:icon-class="'gui-color-red'"></cardBody>
				</view>
				<view @tap="open('guimodal2')">
					<cardBody :icon="'&#xe60d;'" :title="'昵称'" :value="`${item.nickname}`" :arrowShow="'1'"
						:icon-class="'gui-color-red'"></cardBody>
				</view>
				<view @tap="open('guimodal3')">
					<cardBody :icon="'&#xe60c;'" :title="'手机号'" :value="`${item.phone}`" :arrowShow="'1'"
						:icon-class="'gui-color-red'"></cardBody>
				</view>
				<view @tap="open('guimodal4')">
					<cardBody :icon="'&#xe7d9;'" :title="'电子邮箱'" :value="`${item.email}`" :arrowShow="'1'"></cardBody>
				</view>
				<view @tap="open('guimodal5')">
					<cardBody :icon="'&#xe624;'" :title="'备注'" :value="`${item.bz}`" :arrowShow="'1'"
						:icon-class="'gui-color-blue'"></cardBody>
				</view>
			</view>
			<gui-modal :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" ref="guimodal1"
				title="请输入用户名">
				<template v-slot:content>
					<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
						<input type="text" v-model="username" name="username" placeholder="请输入用户名" />
					</view>
				</template>
	
				<template v-slot:btns>
					<view class="gui-flex gui-row gui-space-between gui-text-center gui-align-items-center"
						style="height: 100rpx;">
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-right:80rpx;">
							<text class="modal-btns gui-color-black" @tap="close('guimodal1')">取消</text>
						</view>
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-left:80rpx;">
							<text class="modal-btns gui-color-black"
								@tap="confirm('guimodal1','username',username)">确认</text>
						</view>
					</view>
				</template>
			</gui-modal>
			<gui-modal :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" ref="guimodal2"
				title="请输入昵称">
				<template v-slot:content>
					<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
						<input type="text" v-model="nickname" name="nickname" placeholder="请输入昵称" />
					</view>
				</template>
	
				<template v-slot:btns>
					<view class="gui-flex gui-row gui-space-between gui-text-center gui-align-items-center"
						style="height: 100rpx;">
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-right:80rpx;">
							<text class="modal-btns gui-color-black" @tap="close('guimodal2')">取消</text>
						</view>
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-left:80rpx;">
							<text class="modal-btns gui-color-black"
								@tap="confirm('guimodal2','nickname',nickname)">确认</text>
						</view>
					</view>
				</template>
			</gui-modal>
			<gui-modal :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" ref="guimodal3"
				title="请输入手机号">
				<template v-slot:content>
					<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
						<input type="text" v-model="phone" name="phone" placeholder="请输入手机号" />
					</view>
				</template>
	
				<template v-slot:btns>
					<view class="gui-flex gui-row gui-space-between gui-text-center gui-align-items-center"
						style="height: 100rpx;">
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-right:80rpx;">
							<text class="modal-btns gui-color-black" @tap="close('guimodal3')">取消</text>
						</view>
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-left:80rpx;">
							<text class="modal-btns gui-color-black"
								@tap="confirm('guimodal3','phone',phone)">确认</text>
						</view>
					</view>
				</template>
			</gui-modal>
			<gui-modal :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" ref="guimodal4"
				title="请输入电子邮箱">
				<template v-slot:content>
					<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
						<input type="text" v-model="email" name="email" placeholder="请输入电子邮箱" />
					</view>
				</template>
	
				<template v-slot:btns>
					<view class="gui-flex gui-row gui-space-between gui-text-center gui-align-items-center"
						style="height: 100rpx;">
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-right:80rpx;">
							<text class="modal-btns gui-color-black" @tap="close('guimodal4')">取消</text>
						</view>
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-left:80rpx;">
							<text class="modal-btns gui-color-black"
								@tap="confirm('guimodal4','email',email)">确认</text>
						</view>
					</view>
				</template>
			</gui-modal>
			<gui-modal :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" ref="guimodal5"
				title="请输入备注">
				<template v-slot:content>
					<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
						<input type="text" v-model="bz" name="bz" placeholder="请输入备注" />
					</view>
				</template>
	
				<template v-slot:btns>
					<view class="gui-flex gui-row gui-space-between gui-text-center gui-align-items-center"
						style="height: 100rpx;">
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-right:80rpx;">
							<text class="modal-btns gui-color-black" @tap="close('guimodal5')">取消</text>
						</view>
						<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-left:80rpx;">
							<text class="modal-btns gui-color-black" @tap="confirm('guimodal5','bz',bz)">确认</text>
						</view>
					</view>
				</template>
			</gui-modal>
		</template>
	</gui-page>
</template>

<script setup>
	import { ref,getCurrentInstance,createApp } from 'vue'
	import { onLoad,onPullDownRefresh } from '@dcloudio/uni-app'
	import cardBody from '@/lib/components/card-body.vue'
	import guiPage from '@/Grace6/components/gui-page.vue'
	import guiModal from "@/Grace6/components/gui-modal.vue"
	import ybmethod from '../../lib/js/ybmethod'
	import ybgolbal from '../../lib/js/ybgolbal'
	const app = createApp();
	const currentInstance = getCurrentInstance();
	const ybapi = ybgolbal.getybapi(currentInstance);
	let item = ref({});
	let username = ref('');
	let nickname = ref('');
	let phone = ref('');
	let email = ref('');
	let bz = ref('');
	onLoad(()=>{
		console.log("进入账户设置页面")
		getData();
	})
	onPullDownRefresh(()=>{
		ybmethod.onPullDownRefresh(getData);
	})
	// 获取数据
	function getData(){
		ybapi.User_Getmyinfo(function(data) {
			console.log(data);
			item.value = data;
			username.value = data.username;
			nickname.value = data.nickname;
			phone.value = data.phone;
			email.value = data.email;
			bz.value = data.bz;
		});
	}
	// 修改数据
	function updateData(key, value) {
		console.log("修改");
		console.log(key, value);
		ybapi.Backuser_UpdateData(item.value.id, key, value, function(data) {
			if (data.updated_num == 1) {
				uni.showToast({
					icon: "none",
					title: "修改成功",
					success() {
						getData()
					}
				})
			} else {
				uni.showToast({
					icon: "none",
					title: "修改失败"
				})
			}
		})
	}
	function open(refvalue){
		console.log(refvalue);
		getData();
		currentInstance.refs[refvalue].open();
	}
	function close(refvalue){
		currentInstance.refs[refvalue].close();
	}
	function confirm(refvalue, value, key){
		updateData(value, key);
		currentInstance.refs[refvalue].close();
	}
	app.component({
		cardBody,
		guiPage,
		guiModal
	});
</script>

<style scoped>
	.gui-list-title-desc {
		display: block;
		font-size: 28rpx;
		line-height: 28rpx;
	}
</style>
